<template>
    <div>
      <!--异步加载轮播图的情况-->
      <Swiper class="swiper-style" v-if="imgList.length > 0">
        <Slide v-for="(item,index) in imgList" :key="index">
          <img :src="'../../../static/'+item" alt="" style="width: 100%;height: 4.5rem">
        </Slide>
      </Swiper>
      <div class="luckyView" v-if="luckData.length>0">
        <div class="rewardList" :style="{'height':luckData.length*0.55+'rem','top':luckyTop+'rem'}">
          <div class="rewardItem" v-for="(item,index) in luckData">
            <span class="gray_content_color noWarp">{{item}}</span>
          </div>
        </div>
      </div>
      <!--------------------------赚钱精选---------------------->
      <div class="titleView">
        <span class="titleLine"></span>
        <span>赚钱优选</span>
      </div>
      <div>
        <div v-for="(item,index) in listData" class="cellClass" @click="gotoUrl(item.platformUrl)">
          <img v-lazy="'../../../static/sw-images/'+item.platformImg" alt="">
          <div class="content">
            <span>任务平台{{index+1}}</span>
            <span>{{item.platformInfo}}</span>
          </div>
          <span class="button">去赚钱</span>
        </div>
      </div>
    </div>
</template>

<script>
  import { Swiper, Slide } from 'vue-swiper-component'
  import api from '../../../config/api/API'
  var defineApi = new api()
  export default {
    data() {
      return {
        imgList: ['444.jpg','home3.png','home4.jpg','home5.jpeg'],
        luckData: ['应用试玩,日进50-100','有疑问可添加客服微信： a2928332554','希望你能玩的开心!!!'],
        luckyTop: 0,
        listData: null
      }
    },
    components: {
      Swiper,
      Slide
    },
    created() {
      this.getData()


      this.scrollLucky()
    },
    methods: {
      getData() {
        var that = this
        defineApi.getData('/list').then((result) => {
          console.log(result.data)
          var data = result.data
          if (data.status == 1) {
            that.listData = data.result
          }
          console.log(that.listData)
        })
      },
      gotoUrl(url) {
        window.location.href = url
      },
      scrollLucky() {
        let that = this
        if (that.luckData.length <= 1) {
          that.luckyTop = 0
        }else {
          setInterval(function () {
            that.luckyTop = that.luckyTop-0.5
            if(that.luckData.length > 1) {
              if(that.luckyTop <= -(that.luckData.length)*0.5) {
                that.luckyTop = 0
              }
            }
          },5000)
        }
      },
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  @import './Home.less';
</style>
<style scoped>
</style>
